<template>
    <div class="box7">
        <div class="title">
            <p>年度游客数量对比</p>
            <img src="../../images/dataScreen-title.png">
        </div>
        <div class="charts" ref="charts"></div>
    </div>
</template>
<script setup lang='ts'>
import { ref, onMounted } from 'vue'
// 引入echarts
import * as echarts from 'echarts'
// 获取挂载图表的DOM节点
let charts = ref()


// 组件挂载完成
onMounted(() => {
    // 一个实例挂载多个图表
    let mycharts = echarts.init(charts.value);
    mycharts.setOption({
        title: {
            text: '散点图',
            left: '40%',
            textStyle: {
                color: 'white'
            },
        },
        xAxis: {
            type: 'category',
            show: true
        },
        yAxis: {},
        grid: {
            left: 0,
            top: 20,
            right: 0,
            bottom: 0,
        },
        series: {
            type: 'scatter',
            data: [22, 55, 99, 6, 88, 44, 33, 55, 11, 65, 69, 66,],
            symbol: 'arrow',
            label: {
                show: true,
                position: 'left'
            }
        },

    })
})


</script>
<style lang='scss' scoped>
.box7 {
    width: 100%;
    height: 100%;
    background: url(../../images/dataScreen-main-cb.png) no-repeat;
    background-size: 100% 100%;

    .title {
        margin-left: 5px;

        p {
            color: white;
            font-size: 18px;
        }
    }

    .charts {
        height: 260px;
    }
}
</style>